<template>
    <view class="pg relative z-0">
        <view class="card-swiper">
            <wd-swiper
                autoplay
                v-model:current="current"
                :list="swiperList"
                customIndicatorClass="custom-indicator-class"
                customItemClass="custom-image"
                customNextClass="custom-image-prev"
                customPrevClass="custom-image-prev"
                :indicator="{ type: 'dots-bar' }"
                previousMargin="9px"
                nextMargin="9px"
                height="450rpx"
            ></wd-swiper>
        </view>
        <view class="cont ml-25">
            <view class="w-700 bg-f87171 rd-14 mt-26 fl-co-cen ju-bet">
                <view class="w-700 rd-12 mt-26 pl-20 pr-20 fl-ro-cen gap-6">
                    <wd-text color="#ffffff" text="69" bold size="18px" mode="price" type="success" prefix="￥" />
                    <wd-text color="#ffffff" text="100" decoration="line-through" size="12px" mode="price" type="success" prefix="￥" />
                </view>
                <view class="w-700 bg-ffffff rd-12 mt-26 p-20">
                    <wd-text
                        text="芦叶满汀洲，寒沙带浅流。二十年重过南楼。柳下系船犹未稳，能几日，又中秋。黄鹤断矶头，故人曾到否？旧江山浑是新愁。欲买桂花同载酒，终不似，少年游。"
                        lineHeight="20px"
                        color="#333"
                    ></wd-text>
                </view>
            </view>
            <view class="w-700 rd-14 mt-26 overflow-hidden">
                <wd-cell-group border>
                    <wd-cell value="" isLink>
                        <template #title>
                            <view class="fl-ro-cen gap-10">
                                <wd-text text="选择" lineHeight="20px" size="12px"></wd-text>
                                <wd-text text="8+512 橄榄绿 x1" lineHeight="20px" color="#333"></wd-text>
                            </view>
                        </template>
                    </wd-cell>
                    <wd-cell>
                        <template #title>
                            <view class="fl-ro-cen gap-10">
                                <wd-text text="运费" lineHeight="20px" size="12px"></wd-text>
                                <wd-text text="免运费" lineHeight="20px" color="#333"></wd-text>
                            </view>
                        </template>
                    </wd-cell>
                </wd-cell-group>
            </view>
            <view class="absolute z-1 bg-ffffff w-750 p-10-0-10-0 btn">
                <wd-button size="large" type="error" custom-class="w-700 ml-25" @click="take_it">立即购买</wd-button>
            </view>
        </view>
    </view>
</template>

<script setup>
    import { ref } from 'vue';

    const current = ref(0);
    const swiperList = ref([
        'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg',
        'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg',
        'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg',
        'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg',
        'https://registry.npmmirror.com/wot-design-uni-assets/*/files/meng.jpg'
    ]);

    const take_it = () => {
        console.log('点击购买');
    };
</script>

<style lang="scss" scoped>
    .card-swiper {
        --wot-swiper-radius: 0;
        --wot-swiper-item-padding: 0 8rpx;
        --wot-swiper-nav-dot-color: #e7e7e7;
        --wot-swiper-nav-dot-active-color: #4d80f0;
        padding-bottom: 24rpx;
        :deep(.custom-indicator-class) {
            bottom: -16px;
        }
        :deep(.custom-image) {
            border-radius: 12rpx;
        }
        :deep(.custom-image-prev) {
            height: 168px !important;
        }
    }

    .btn {
        bottom: calc(env(safe-area-inset-bottom));
    }
</style>
